<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>站点列表</title>	
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,ul,li,p {margin: 0;padding:0;font-size:14px; font-family:microsoft yahei;font-weight: 400;-webkit-text-size-adjust: none}
body{background: #fff}
ul, ol, li {list-style-type:none;vertical-align:0}
a {text-decoration: none;color: inherit}
b {font-weight: 400}
em,i {font-style: normal}
a:focus,button:focus {outline: 0}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } /* End Clearfix */
.clear { clear:both}
h1{ font-size: 26px; padding: 20px 0; color: #f00}
.center{ margin:0 auto; text-align: center}
.site{ font-weight: bold; padding: 5px 0 10px 5px; text-align: left; }
.client{ border-top: 1px solid #ccc; width: 90%;  height: 26px; font-size: 12px; line-height: 20px; color: #666; text-align: left; padding-left: 5px }
.siteslist{ margin:0 auto; width: 960px;}
.siteslist ul li{ padding: 5px 0;  float: left; width: 158px; height: 59px; border: 1px solid #ddd; font-size: 13px}


</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="<?php echo JS_URL;?>jquery.qrcode.js"></script>
<script type="text/javascript" src="<?php echo JS_URL;?>qrcode.js"></script>
 <script>
	//jQuery('#qrcode').qrcode("this plugin is great");
	 function generateQRCode(id) {
		$('#qrcode'+id).empty();
		$('#qrcode'+id).qrcode({
			text     : " http://www.heehee.cc/bus/station/"+id+".html ", //设置二维码内容    
			render   : "canvas",//设置渲染方式 （有两种方式 table和canvas，默认是canvas）   
			width       : 1500,     //设置宽度    
			height      : 1500,     //设置高度    
			typeNumber  : -1,      //计算模式    
			correctLevel    : 2,//纠错等级    
			background      : "#ffffff",//背景颜色    
			foreground      : "#000000" //前景颜色  
		});	

		$('#saveQrCode'+id).click(function(){
		    var canvas = $('#qrcode'+id).find("canvas").get(0);

		    var url = canvas.toDataURL('image/png');
		    $("#download"+id).attr('href', url).get(0).click();


		    // try {//解决IE转base64时缓存不足，canvas转blob下载
		    //     var blob = canvas.msToBlob();
		    //     navigator.msSaveBlob(blob, 'qrcode.png');
		    // } catch (e) {//如果为其他浏览器，使用base64转码下载
		    //     var url = canvas.toDataURL('image/png');
		    //     $("#download"+id).attr('href', url).get(0).click();
		    // }
		    return false;
		});


	}

</script>

</head>
<body>
 <h1 class="center">
二维码列表
</h1>
 <div class="siteslist center clearfix">
   <ul>
   <volist name="list" id="vo">
     <li>
     <div class="site">
        <a id="download{$vo.qr_id}" download="{$vo.station_name}{$vo.qr_id}.png"></a>
        <a id="saveQrCode{$vo.qr_id}" style="cursor: pointer;">{$vo.station_name}{$vo.qr_id}</a>
        <div id="qrcode{$vo.qr_id}" class="diy_dot" style="left: 130px;display:none;border:20;">
		<script type="text/javascript">generateQRCode('{$vo.qr_id}');</script>
        </div>

 	</div>
     </li> 
</volist>
   </ul>
 </div>


</body>
</html> 